<template>
    <div>
      <div class="home">
      <el-tabs type="border-card">
        <el-tab-pane label="上衣">
          <div class="top">
            <div>
            <ul>
              <li v-for="aa in show">
                <h4>{{aa.bt}}</h4>
                <section>
                  <img :src="aa.tu" alt="">
                  <div>
                    <span v-for="zz in aa.content">{{zz}}</span>
                  </div>
                </section>
              </li>
            </ul>
            <img src="https://s10.mogucdn.com/mlcdn/c45406/190219_4d8e5kc9de17gf075b3ecekfj10b1_200x240.jpg" alt="">
            </div>
          </div>
          <div class="bottom">
            <h3>卫衣</h3>
            <section>
              <input type="text" placeholder="￥">-
              <input type="text" placeholder="￥">
              <span>确定</span>
              <i></i>
            </section>
            <div class="show">
              <ul>
                <li v-for="aa in show2">
                  <img :src="aa.tu" alt="">
                  <p class="zz">找相似</p>
                  <p>{{aa.name}}</p>
                  <section>
                  <span class="span1">￥{{aa.price}}</span>
                  <span class="span2">￥{{aa.unprice}}</span>
                  <span class="span3">☆{{aa.like}}</span>
                  </section>
                </li>
                <li v-for="aa in show2">
                  <img :src="aa.tu" alt="">
                  <p class="zz">找相似</p>
                  <p>{{aa.name}}</p>
                  <section>
                    <span class="span1">￥{{aa.price}}</span>
                    <span class="span2">￥{{aa.unprice}}</span>
                    <span class="span3">☆{{aa.like}}</span>
                  </section>
                </li>
                <li v-for="aa in show2">
                  <img :src="aa.tu" alt="">
                  <p class="zz">找相似</p>
                  <p>{{aa.name}}</p>
                  <section>
                    <span class="span1">￥{{aa.price}}</span>
                    <span class="span2">￥{{aa.unprice}}</span>
                    <span class="span3">☆{{aa.like}}</span>
                  </section>
                </li>
                <li v-for="aa in show2">
                  <img :src="aa.tu" alt="">
                  <p class="zz">找相似</p>
                  <p>{{aa.name}}</p>
                  <section>
                    <span class="span1">￥{{aa.price}}</span>
                    <span class="span2">￥{{aa.unprice}}</span>
                    <span class="span3">☆{{aa.like}}</span>
                  </section>
                </li>
              </ul>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="裙子">配置管理</el-tab-pane>
        <el-tab-pane label="裤子">角色管理</el-tab-pane>
        <el-tab-pane label="内衣">定时任务补偿</el-tab-pane>
        <el-tab-pane label="鞋子">用户管理</el-tab-pane>
        <el-tab-pane label="包包">配置管理</el-tab-pane>
        <el-tab-pane label="配饰">角色管理</el-tab-pane>
        <el-tab-pane label="男友">定时任务补偿</el-tab-pane>
        <el-tab-pane label="美妆">用户管理</el-tab-pane>
        <el-tab-pane label="母婴">配置管理</el-tab-pane>
        <el-tab-pane label="家居">角色管理</el-tab-pane>
        <el-tab-pane label="百货">定时任务补偿</el-tab-pane>
        <el-tab-pane label="食品">用户管理</el-tab-pane>
        <el-tab-pane label="家电">配置管理</el-tab-pane>
        <el-tab-pane label="运动">角色管理</el-tab-pane>
      </el-tabs>
      </div>
    </div>
</template>

<script>
  import xq from '../xq2'
    export default {
        data: function () {
            return {
              show:xq.data,
              show2:xq.show
            }
        }
    }
</script>

<style scoped>
  .el-tabs >>> .el-tabs__item{
    font-size: 16px !important;
  }
  .el-tabs--border-card{
    box-shadow: none;
    border: none;
    border-top: solid 1px #ccc;
  }
  .el-tabs--border-card >>> .el-tabs__header{
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
  }
  .el-tabs--border-card >>> .el-tabs__content{
    padding:0 !important;
  }
  .home{
    width: 90%;
    margin: 0 auto;
  }
  .top{
    border: solid 1px #ccc;
    border-top: none;
  }
  .top>div{
    /*border: solid 1px red;*/
    overflow: hidden;
  }
  .top ul{
    width:80% ;
    /*border: solid 1px red;*/
    overflow: hidden;
    float: left;
  }
  .top li{
    width: 45%;
    margin: 1.5%;
    float: left;
    /*border: solid 1px #000;*/
  }
  .top li h4{
    text-align: left;
    margin: 5px 0;
  }
  .top li section{
    overflow: hidden;
  }
  .top li img{
    float: left;
    width: 60px;
    height:60px;
    border: solid 1px #ccc;
    margin-right: 10px;
    cursor: pointer;
  }
  .top li div{
    float: left;
    font-size: 12px;
    width: 70%;
    /*height: 100px;*/
    text-align: left;
  }
  .top li div span{
    cursor: pointer;
    margin: 10px;
    /*padding-top: 10px;*/
    padding-right: 10px;
    border-right:solid 1px #ccc ;
  }
  .top li div span:first-child{
    color: red;
  }
  .top>div>img{
    border-left: dashed 1px #ccc;
    padding-left:20px ;
    margin: 20px;
    float: right;
    cursor: pointer;
  }

  .bottom{
    text-align: left;
    margin-top: 20px;
  }
  .bottom h3{
    margin: 10px 0;
  }
  .bottom>section{
    border: solid 1px #ccc;
    padding-left: 20px;
  }
  .bottom input{
    margin: 5px;
    width: 50px;
    height: 25px;
  }
  .bottom>section span{
    font-size: 14px;
    border: solid 1px #ccc;
    padding:4px 8px;
    cursor: pointer;
  }
  .bottom section i{
    /*display: inline-block;*/
    /*height: 30px;*/
    border-left: solid 1px #ccc;
    margin-left: 20px;
   /*padding-top: 5px;*/
  }
  .bottom .show ul{
    overflow: hidden;
  }
  .bottom .show li{
    width: 12%;
    float: left;
    margin: 1.1%;
    border: solid 1px #ccc;
    position: relative;
    cursor: pointer;
  }
  .bottom .show li:hover{
    border: solid 1px red;
  }
  .bottom .show li:hover .zz{
    display: block;
  }
  .bottom .show li img{
    width: 100%;
  }
  .bottom .show li p{
    width: 95%;
    margin: 0 auto;
    font-size: 14px;
    color: #666666;
  }
  .bottom .show li .zz{
    width: 100%;
    /*width: 12%;*/
    text-align: center !important;
    color: #fff;
    background:red;
    opacity: 0.6;
    position: absolute;
    bottom: 72px;
    z-index: 5;
    display: none;
  }
  .bottom .show li section{
    overflow: hidden;
    padding: 5px 0;
    width: 95%;
    margin: 0 auto;
  }
  .bottom .show li .span1{
    font-size: 16px;
    font-weight: 700;
  }
  .bottom .show li .span2{
    font-size: 13px;
    text-decoration: line-through;
    margin-left: 5px;
  }
  .bottom .show li .span3{
    float: right;
    font-size: 14px;
    color: #ccc;
  }
</style>
